<template>
  <div class="container ny_content">
    <div class="ny_nav">
      <div class="ny_nav_h">
        <div>
          <h2>文明眼管理平台</h2>
          <p>Civilized eyes</p>
        </div>
      </div>
      <div class="ny_nav_dqwz">
        当前位置：<span class="hidden-xs">服务项目></span>文明眼管理平台
      </div>
    </div>
    <div class="ny_view">
      <div class="ny_news_nav">
        <a href="javascript:void(0)" v-for="(item,index) in civilTypeList" :key="index"
           :class="index == queryInfo.currentValue ? 'news_btn news_on ' : 'news_btn' "
           @click="handleChange(index)">{{ item }}</a>
      </div>
      <div v-for="(c_item,c_index) in civilList" :key="c_index">
        <div id="fwzl_nr" v-if="isShow">
          <div class="fwxm_item">
            <div class="wmy_ydwt">
              <h3>您在创城中是否遇到过以下问题？</h3>
              <div class="wmy_ydwt_cell">
                <div class="row">
                  <div class="col-md-5">
                    <h4>您在文明城市创建过程中是否遇到以下问题？</h4>
                  </div>
                  <div class="col-md-7">
                    <ul>
                      <li>感觉创城流程杂乱冗繁</li>
                      <li>统计表格滞后影响进程</li>
                      <li>涉及广泛沟通协调吃力</li>
                      <li>问题反馈无法及时解决</li>
                    </ul>
                  </div>
                </div>

              </div>

              <div class="wmy_ydwt_cell">
                <div class="row">
                  <div class="col-md-5">
                    <h4>您所在的街道是否在以下现象？</h4>
                  </div>
                  <div class="col-md-7">
                    <ul>
                      <li>楼道存在乱堆乱放、乱停乱放、乱贴乱画等不文明现象</li>
                      <li>主次干道普遍存在车辆乱停乱放、乱扔垃圾现象</li>
                      <li>农贸市场存在经营环境不整洁现象</li>
                    </ul>
                  </div>
                </div>

              </div>
            </div>

            <div class="wmy_jjwt">
              <h3>我们的平台能为您解决哪些问题？</h3>
              <div class="row">
                <div class="col-md-3 col-sm-6 wmy_jjwt_top" v-for="(p_item,p_index) in problemList" :key="p_index">
                  <div class="wmy_jjwt_cell" :style="{background:'url('+p_item.url.url+') no-repeat center 50%/cover'}">
                    <span :class="'iconfont ' + iconList[p_index]"></span>
                    <h4>{{ p_item.title }}</h4>
                    <p>{{ p_item.desc }}</p>
                  </div>
                </div>

              </div>
            </div>

          </div>

        </div>
        <div id="fwzl_nr" v-else>
          <div class="row">
            <div class="col-md-9" id="xsd_desc">
                <div v-html="c_item.content"></div>
            </div>
            <div class="col-md-3">
              <img :src="c_item.url.url" >
            </div>
          </div>
        </div>
        <div class="ny_gsjj" v-for="(cc_item,cc_index) in c_item.CivilConfig" :key="cc_index">
          <h2>{{ cc_item.title }}</h2>
          <h4 class="wmy_xm_desc" v-if="c_item.column_id == 1">{{ cc_item.desc }}</h4>
          <div class="wmy_xm_contet">
            <img :src="cc_item.url.url" :alt="cc_item.title">
            <p class="wmy_xm_desc" v-if="c_item.column_id == 2">{{ cc_item.desc }}</p>
          </div>
        </div>
<!--        <div class="ny_gsjj" v-if="isShow">-->
<!--          <h2>案例展示</h2>-->
<!--          <div class="wmy_xm_alzs">-->
<!--            <div class="row">-->
<!--              <div class="col-md-4 col-sm-6" v-for="(case_item,case_index) in caseList" :key="case_index">-->
<!--                <div class="wmy_xm_alzs_cell">-->
<!--                  &lt;!&ndash; url(./img/pt_wmy6.jpg) no-repeat  50%/cover; &ndash;&gt;-->
<!--                  <div class="wmy_xm_alzs_cell_img"  :style="{background:'url('+case_item.url.url+') no-repeat center  50%/cover'}">-->
<!--                  </div>-->
<!--                  <h4>{{ case_item.title }}</h4>-->
<!--                </div>-->
<!--              </div>-->

<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return{
      civilTypeList:[],
      isShow:true,
      queryInfo: {
        limit: 110,
        page: 1,
        currentValue: 1,
      },
      civilList:[],
      caseList:[],
      problemList:[],
      iconList:[
          'icon-zuzhijiagou',
          'icon-shezhi',
          'icon-diannao',
          'icon-jiankong'
      ],
    }
  },
  created () {
    this.getCivilTypeList()
    this.handleChange(this.queryInfo.currentValue)
    this.getCaseList()
    this.solveTheProblem()
  },
  methods:{
    //解决问题
    async solveTheProblem () {
      const {data: res} = await this.$http.get('home/solve_the_problem',{params: this.queryInfo})
      if (res.code !== 200) return false
      this.problemList = res.data.list
    },
    //内容
    async getCivilTypeList () {
      const {data: res} = await this.$http.get('home/civilization_type_list')
      if (res.code !== 200) return false
      this.civilTypeList = res.data.list
    },
    async handleChange(index){
      this.queryInfo.currentValue = index
      this.isShow = this.queryInfo.currentValue == 1 ? true : false
      const {data: res} = await this.$http.get('home/civilization_list', {params: this.queryInfo})
      if (res.code !== 200) return false
      this.civilList = res.data.list
    },
    //案例
    async getCaseList(){
      const {data: res} = await this.$http.get('home/get_case_list', {params: this.queryInfo})
      if (res.code !== 200) return false
      this.caseList = res.data.list
    }
  },
  watch:{

  }
}
</script>

<style scoped>

</style>
